<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />
  <!-- Facebook and Twitter integration -->
  <meta property="og:title" content=""/>
  <meta property="og:image" content=""/>
  <meta property="og:url" content=""/>
  <meta property="og:site_name" content=""/>
  <meta property="og:description" content=""/>
  <meta name="twitter:title" content="" />
  <meta name="twitter:image" content="" />
  <meta name="twitter:url" content="" />
  <meta name="twitter:card" content="" />

  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">

  <!-- Animate.css -->
  <link rel="stylesheet" th:href="@{/css/animate.css}">
  <!-- Icomoon Icon Fonts-->
  <link rel="stylesheet" th:href="@{/css/icomoon.css}">
  <!-- Bootstrap  -->
  <link rel="stylesheet" th:href="@{/css/bootstrap.css}">

  <!-- Magnific Popup -->
  <link rel="stylesheet" th:href="@{/css/magnific-popup.css}">

  <!-- Owl Carousel  -->
  <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}">
  <link rel="stylesheet" th:href="@{/css/owl.theme.default.min.css}">

  <!-- Flexslider  -->
  <link rel="stylesheet" th:href="@{/css/flexslider.css}">

  <!-- Pricing -->
  <link rel="stylesheet" th:href="@{/css/pricing.css}">

  <!-- Theme style  -->
  <link rel="stylesheet" th:href="@{/css/style.css}">

  <!-- bootstrap-fileinput style  -->
  <link rel="stylesheet" th:href="@{/css/fileinput.css}">

  <!-- Modernizr JS -->
  <script th:src="@{/js/modernizr-2.6.2.min.js}"></script>
  <!-- FOR IE9 below -->
  <!--[if lt IE 9]-->
  <script th:src="@{/js/respond.min.js}"></script>
  <!--[endif]-->

</head>
<style>
  .username{
    font-weight: bold;
  }

  .logout{
    font-size: 12px;
  }

  .user-avatar{
    margin-right: 10px;
    width: 27px;
    height: 27px;
  }

  .user-photo{
    margin-right: 10px;
    width: 150px;
    border: lightgray 2px solid;
    box-shadow: #8D8D8D 2px 2px 10px;
  }
</style>
<body>

<div class="fh5co-loader"></div>

<div id="page">
  <nav class="fh5co-nav" role="navigation">
    <div class="top-menu">
      <div class="container">
        <div class="row">
          <div class="col-xs-2">
            <div id="fh5co-logo"><a href="index.html"><i class="icon-study"></i>Educ<span>.</span></a></div>
          </div>
          <div class="col-xs-10 text-right menu-1">
            <ul class="navBar">
              <li class="active"><a th:href="@{/index}">首页</a></li>
              <li><a href="course/list">热门课程</a></li>
              <li class="btn-cta"><a th:href="@{/login}"><span>登录</span></a></li>
              <li class="btn-cta"><a th:href="@{/register}"><span>加入课程</span></a></li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </nav>

  <aside id="fh5co-hero">
    <div class="flexslider">
      <ul class="slides">
        <li style="background-image: url(images/img_bg_4.jpg);">
          <div class="overlay-gradient"></div>
          <div class="container">
            <div class="row">
              <div class="col-md-8 col-md-offset-2 text-center slider-text">
                <div class="slider-text-inner">
                  <h1 class="heading-section">个人信息</h1>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </aside>

  <div id="fh5co-contact">
    <div class="container">
      <div class="row">
        <div class="col-md-5 col-md-push-1 animate-box">

          <div class="fh5co-contact-info">
            <h3>联系方式</h3>
            <ul>
              <li class="photo"><img class="user-photo" th:src="@{/images/person1.jpg}" alt=""></li>
              <li class="phone"></li>
              <li class="email"></li>
              <li class="gender"></li>
              <li class="birth"></li>
            </ul>
          </div>

        </div>
        <div class="col-md-6 animate-box">
          <h3>信息修改</h3>
          <form id="userInfo">
            <input type="text" id="id" name="id" hidden>
            <div class="row form-group">
              <div class="col-md-6">
                 <label for="phone">Phone</label>
                <input type="text" id="phone" class="form-control" placeholder="Your Phone Number" name="phone">
              </div>
              <div class="col-md-6">
                 <label for="email">Email</label>
                <input type="email" id="email" class="form-control" placeholder="Your Email" name="email">
              </div>
            </div>

            <div class="row form-group">
              <div class="col-md-12">
                <label for="gender">性别</label>
                <select class="form-control" id="gender" name="gender">
                  <option value="0">男</option>
                  <option value="1">女</option>
                </select>
              </div>
            </div>

            <div class="row form-group">
              <div class="col-md-12">
                <label for="birth">出生年月</label>
                <input class="form-control" placeholder="yyyy-MM-dd" type="text" id="birth">
              </div>
            </div>
            <div class="row form-group">
              <div class="col-md-12">
                <label for="photo">上传头像</label>
                <input type="hidden" name="photo">
                <div class="file-loading">
                  <input name="file" type="file" id="photo" class="form-control file-upload">
                </div>
              </div>
            </div>
            <div class="form-group">
              <button class="btn btn-primary">提交</button>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>

  <footer id="fh5co-footer" role="contentinfo" style="background-image: url(images/img_bg_4.jpg);">
    <div class="overlay"></div>
    <div class="container">

      <div class="row copyright">
        <div class="col-md-12 text-center">
          <p>
            <small class="block">Copyright &copy; 2017.Company name All rights reserved.</small>
          </p>
        </div>
      </div>

    </div>
  </footer>
</div>

<div class="gototop js-top">
  <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>


<!-- jQuery -->
<script th:src="@{/js/jquery.min.js}"></script>
<!-- jQuery Easing -->
<script th:src="@{/js/jquery.easing.1.3.js}"></script>
<!-- Bootstrap -->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Waypoints -->
<script th:src="@{/js/jquery.waypoints.min.js}"></script>
<!-- Stellar Parallax -->
<script th:src="@{/js/jquery.stellar.min.js}"></script>
<!-- Carousel -->
<script th:src="@{/js/owl.carousel.min.js}"></script>
<!-- Flexslider -->
<script th:src="@{/js/jquery.flexslider-min.js}"></script>
<!-- countTo -->
<script th:src="@{/js/jquery.countTo.js}"></script>
<!-- Magnific Popup -->
<script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
<script th:src="@{/js/magnific-popup-options.js}"></script>
<!-- Count Down -->
<script th:src="@{/js/simplyCountdown.js}"></script>
<!-- Main -->
<script th:src="@{/js/main.js}"></script>

<!-- bootstrap-datetimepicker -->
<script th:src="@{/js/bootstrap-datetimepicker.js}"></script>

<!-- bootstrap-fileinput -->
<script th:src="@{/js/fileinput.js}"></script>

<!-- jQuery.form -->
<script th:src="@{/js/jquery.form.min.js}"></script>
<!-- layer -->
<script th:src="@{/js/layer.js}"></script>



<script>

    $("#birth").datetimepicker({
      format: "yyyy-mm-dd",
      minView: "month",
      autoclose: true,
      language: "zh-cn"
    });

    //判断当前用户是否登录
    var user = JSON.parse(sessionStorage.getItem("user"));

    $(function () {
      //用户已登录，显示用户信息
      if (user != null) {
        //隐藏登录注册按钮
        $(".navBar > .btn-cta").hide();
        if(user.photo == null || user.photo === ''){
          $(".navBar").append(
                  '<li><a href="../../information"><img class="user-avatar img-circle" src="images/user-default.png"><span class="username">'+user.username+'</span></a></li>'+
                  '<li><a href="javascript:void(0)" class="logout"><span>退出</span></a></li>'
          );
        }else{
          $(".navBar").append(
                  '<li><a href="information"><img class="user-avatar img-circle" src="'+user.photo+'"><span class="username">'+user.username+'</span></a></li>'+
                  '<li><a href="javascript:void(0)" class="logout"><span>退出</span></a></li>'
          );
        }
        //用户个人信息
        if(user.photo != null && user.photo !== ""){
          $(".photo > img").attr("src", user.photo);
        }else{
          $(".photo").html("请在右侧表单上传头像");
        }
        if(user.phone != null && user.phone !== ""){
          console.log(user);
          $(".phone").html(user.phone);
        }else{
          $(".phone").html("-");
        }
        if(user.email != null && user.email !== ""){
          $(".email").html(user.email);
        }else{
          $(".email").html("-");
        }
        if(user.gender != null && user.gender !== ""){
          $(".gender").html((user.gender == '0')? '男' : '女');
          $("#gender").val(user.gender);
        }else{
          $(".gender").html("-");
        }
        if(user.birth != null && user.birth !== ""){
          $(".birth").html(user.birth);
        }else{
          $(".birth").html("-");
        }
      }

      //退出按钮注册监听
      $(".logout").click(function () {
        sessionStorage.removeItem("user");
        window.location.href = "/client";
      });

      // 图片上传
      $("#photo").fileinput({
        uploadUrl: 'http://localhost:80/api/person/photo',
        maxFileCount: 1,
        autoReplace: true,
        allowedFileTypes: ['image'],
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
        browseClass: "btn btn-default", //按钮样式
        dropZoneTitle: '请上传图片文件',
        ajaxSettings:{
          headers: {"token" : user.token}
        }
      }).on('fileuploaded', function (event, data, previewId, index) {
        console.log("event=>"+JSON.stringify(event))
        console.log("data=>"+JSON.stringify(data.response))
        $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
      }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
      })

      //个人信息表单提交
      $('#userInfo').submit(function (){
        $("#id").val(user.id);

        var data = $("#userInfo").serialize();

        var options = {
          type : 'post',
          url : 'http://localhost:80/api/person/information',
          data: {data},
          headers:{token : user.token},
          success: function (result) {
            if(result.code != 0){
              //提交错误
              layer.open({
                type: 1,
                title : "修改信息",
                content: result.msg,
              })
            }
            //提交成功
            sessionStorage.removeItem("user");
            window.location.href = "/client";
          }
        }

        $('#userInfo').ajaxSubmit(options);
        return false;

      });





    })



</script>
</body>
</html>

